<template>
<!-- 添加组织架构 -->
<el-dialog :title="dialog.title" :visible.sync="dialog.visible" width="25%" :before-close="closeDialog">
    <el-form ref="ruleForm" :model="ruleForm" label-width="80px" :rules="rules">
        <el-form-item label="上级分类" prop="parent_title">
            <span>{{ ruleForm.parent_title }}</span>
        </el-form-item>
        <el-form-item label="分类名称" prop="title">
            <el-input maxlength="20" show-word-limit v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button @click="dialog.visible = false">取消</el-button>
            <el-button type="primary" @click="submit">提交</el-button>
        </el-form-item>
    </el-form>
</el-dialog>
</template>

<script>
import {
    createCategoryApi,
    saveCategoryApi,
} from '@/api/system/image/category.js';

// 初始化表单
const ruleForm = {
    id: "",
    parent_id: "",
    parent_title: "",
    title: "",
};

const dialog = {
    //弹窗选项
    visible: false,
    title: "",
    type: "",
};

export default {
    data() {
        return {
            dialog: Object.assign({}, dialog),
            ruleForm: Object.assign({}, ruleForm),
            rules: {
                //组织架构表单验证
                title: [{
                    required: true,
                    message: "请输入分类名称",
                    trigger: "blur"
                }],
            },
        }
    },
    methods: {
        showAddView(row) {
            this.dialog = {
                visible: true,
                title: "添加分类",
                type: "add"
            };
            this.ruleForm = Object.assign({}, row);
        },
        showSaveView(row) {
            this.dialog = {
                visible: true,
                title: "编辑分类",
                type: "edit"
            };
            this.ruleForm = Object.assign({}, row);
        },
        submit() {
            let that = this;
            let type = that.dialog.type;
            let query = that.ruleForm;
            that.$refs["ruleForm"].validate((valid) => {
                if (!valid) {
                    that.$message("请填写完整并检查您的填写信息");
                }

                if (type == 'add') {
                    createCategoryApi(query).then((res) => {
                        if (res.code !== 200) {
                            that.$message.error(res.msg);
                        } else {
                            this.$emit("getTree");
                            that.$message.success(res.msg);
                            that.closeDialog();
                        }
                    });
                } else {
                    saveCategoryApi(query).then((res) => {
                        if (res.code !== 200) {
                            that.$message.error(response.msg);
                        } else {
                            this.$emit("getTree");
                            that.$message.success(res.msg);
                            that.closeDialog();
                        }
                    });
                }
            });
        },
        closeDialog() {
            // 重置系统
            this.dialog = Object.assign({}, dialog);
            this.ruleForm = Object.assign({}, ruleForm);
        }
    }
}
</script>
